<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博物馆预约管理后台</title>
    
    <!-- Quill富文本编辑器 -->
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.min.js"></script>

    <link rel="stylesheet" href="./editor/style.css">
    <script src="./editor/index.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
            background: #f5f6fa;
            display: flex;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 260px;
            background: #2c3e50;
            color: white;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            overflow-y: auto;
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        
        .sidebar-header {
            padding: 25px 20px;
            background: #34495e;
            border-bottom: 1px solid #465366;
        }
        
        .sidebar-header h1 {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 600;
            color: white;
        }
        
        .sidebar-header small {
            color: #bdc3c7;
            font-size: 0.85rem;
        }
        
        .sidebar-nav {
            padding: 0;
        }
        
        .nav-group {
            margin-bottom: 8px;
        }
        
        .nav-group-title {
            padding: 20px 20px 10px 20px;
            font-size: 0.75rem;
            color: #95a5a6;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .nav-item {
            display: block;
            padding: 14px 20px;
            color: #ecf0f1;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
            font-size: 0.9rem;
            position: relative;
        }
        
        .nav-item:hover {
            background: #34495e;
            color: #3498db;
            padding-left: 30px;
        }
        
        .nav-item.active {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
        }
        
        .nav-item.active:hover {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            padding-left: 20px;
        }
        
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: #ecf0f1;
        }
        
        .nav-item i {
            width: 20px;
            margin-right: 12px;
            text-align: center;
        }
        
        .main-content {
            margin-left: 260px;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .header {
            background: white;
            padding: 20px 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-title {
            font-size: 1.6rem;
            font-weight: 600;
            color: #2c3e50;
            margin: 0;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .user-info .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3498db, #2980b9);
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
        }
        
        .content-area {
            flex: 1;
            padding: 30px;
            background: #f8f9fa;
        }
        
        .page-content {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            min-height: calc(100vh - 200px);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: #2c3e50;
            margin: 0 0 25px 0;
            padding-bottom: 15px;
            border-bottom: 2px solid #ecf0f1;
        }
        
        /* 移动端适配 */
        .sidebar-toggle {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001;
            background: #3498db;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
        }
        
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .sidebar-toggle {
                display: block;
            }
            
            .content-area {
                padding: 20px 15px;
            }
            
            .page-content {
                padding: 20px;
            }
            
            .header {
                padding: 15px 60px 15px 15px;
            }
        }
        
        /* 保留原有的表格和表单样式 */
        
        .header {
            background: #fff;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-info {
            display: flex;
            align-items: center;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 1.5rem;
        }
        
        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        
        .nav-tabs {
            display: flex;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }
        
        .nav-tab {
            flex: 1;
            padding: 1rem;
            text-align: center;
            background: #fff;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: #666;
            transition: all 0.3s ease;
        }
        
        .nav-tab.active {
            background: #3498db;
            color: #fff;
        }
        
        .nav-tab:hover:not(.active) {
            background: #f8f9fa;
            color: #333;
        }
        
        .tab-content {
            background: #fff;
            border-radius: 8px;
            padding: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            text-align: center;
        }
        
        .stat-card h3 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        
        .stat-card p {
            opacity: 0.9;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: #555;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #3498db;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-success {
            background: #27ae60;
            color: #fff;
        }
        
        .btn-success:hover {
            background: #229954;
        }
        
        .btn-danger {
            background: #e74c3c;
            color: #fff;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .table th,
        .table td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #555;
        }
        
        .table tr:hover {
            background: #f8f9fa;
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .status-open {
            background: #d4edda;
            color: #155724;
        }
        
        .status-closed {
            background: #f8d7da;
            color: #721c24;
        }
        
        .status-pending {
            background: #fff3cd;
            color: #856404;
        }
        
        .loading {
            text-align: center;
            padding: 2rem;
            color: #666;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .alert-success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .alert-error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            overflow: auto;
        }
        
        .modal-content {
            background: #fff;
            margin: 5% auto;
            padding: 2rem;
            width: 90%;
            max-width: 500px;
            border-radius: 8px;
            position: relative;
        }
        
        .close {
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
        }
        
        .close:hover {
            color: #333;
        }
        
        /* 优化反馈页面样式 */
        .badge {
            display: inline-block;
            padding: 0.25em 0.6em;
            font-size: 0.75em;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
        }
        
        .badge-info { background-color: #17a2b8; color: #fff; }
        .badge-secondary { background-color: #6c757d; color: #fff; }
        .warning { background-color: #ffc107; color: #212529; }
        .success { background-color: #28a745; color: #fff; }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
        }
        
        .btn-info { background-color: #17a2b8; border-color: #17a2b8; color: #fff; }
        .btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; }
        .btn-success { background-color: #28a745; border-color: #28a745; color: #fff; }
        .btn-danger { background-color: #dc3545; border-color: #dc3545; color: #fff; }
        
        .btn-info:hover { background-color: #138496; border-color: #117a8b; }
        .btn-primary:hover { background-color: #0056b3; border-color: #004085; }
        .btn-success:hover { background-color: #218838; border-color: #1e7e34; }
        .btn-danger:hover { background-color: #c82333; border-color: #bd2130; }
        
        .table td {
            vertical-align: middle;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 0 0.5rem;
            }
            
            .nav-tabs {
                flex-direction: column;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .table {
                font-size: 0.875rem;
            }
        }
        
        /* Quill富文本编辑器样式优化 */
        .ql-toolbar {
            border-top: 1px solid #ddd;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
        }
        
        .ql-container {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 4px 4px;
            font-family: inherit;
        }
        
        .ql-editor {
            min-height: 150px;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .ql-editor.ql-blank::before {
            font-style: normal;
            color: #999;
        }
    </style>
    <style>
        .editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100;
        }
        .editor—wrapper .toolbar {
            border-bottom: 1px solid #ccc;
        }
        .editor—wrapper .editor {
            height: 300px;
        }
    </style>
    <style>
        /* 图片预览容器样式 */
        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .image-preview-item {
            position: relative;
            width: 120px;
            height: 120px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

        .image-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-preview-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
        }

        .image-preview-remove:hover {
            background: rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>
    <!-- 移动端菜单按钮 -->
    <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
    
    <!-- 侧边栏 -->
    <nav class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h1>校史馆管理</h1>
            <small>Museum Admin</small>
        </div>
        <div class="sidebar-nav">
            <div class="nav-group">
                <div class="nav-group-title">数据概览</div>
                <button class="nav-item active" onclick="showPage('dashboard')" data-permission="dashboard.view">
                    <i>📊</i> HOME
                </button>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">预约管理</div>
                <button class="nav-item" onclick="showPage('reservations')" data-permission="reservations.view">
                    <i>📅</i> 个人预约
                </button>
                <button class="nav-item" onclick="showPage('team-reservations')" data-permission="reservations.view">
                    <i>👥</i> 团队预约
                </button>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">用户 & 活动</div>
                <button class="nav-item" onclick="showPage('users')" data-permission="users.view">
                    <i>👥</i> 用户管理
                </button>
                <button class="nav-item" onclick="showPage('activities')" data-permission="activities.view">
                    <i>🎯</i> 活动管理
                </button>
                <button class="nav-item" onclick="showPage('feedback')">
                    <i>💬</i> 意见反馈
                </button>
                <button class="nav-item" onclick="showPage('volunteers')">
                    <i>🙋</i> 志愿者管理
                </button>
                <button class="nav-item" onclick="showPage('common-visitors')" data-permission="users.view">
                    <i>📋</i> 常用观众
                </button>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">内容管理</div>
                <button class="nav-item" onclick="showPage('carousels')">
                    <i>🎠</i> 轮播图管理
                </button>
                <button class="nav-item" onclick="showPage('chapters')">
                    <i>📚</i> 篇章管理
                </button>
                <button class="nav-item" onclick="showPage('exhibits')">
                    <i>🏛️</i> 展项管理
                </button>
                <button class="nav-item" onclick="showPage('items')">
                    <i>💎</i> 展品管理
                </button>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">系统配置</div>
                <button class="nav-item" onclick="showPage('config')" data-permission="config.view">
                    <i>⚙️</i> 系统配置
                </button>
                <button class="nav-item" onclick="showPage('timeslots')" data-permission="timeslots.view">
                    <i>🕒</i> 时段管理
                </button>
                <button class="nav-item" onclick="showPage('closures')" data-permission="closures.view">
                    <i>🚫</i> 闭馆设置
                </button>
                <button class="nav-item" onclick="showPage('subscribe-templates')" data-permission="config.view">
                    <i>📱</i> 消息模板
                </button>
            </div>
            
            <div class="nav-group">
                <div class="nav-group-title">系统管理</div>
                <button class="nav-item" onclick="showPage('admin')" data-permission="admin.view" style="display: none;">
                    <i>👨‍💼</i> 管理员
                </button>
                <button class="nav-item" onclick="showPage('roles')" data-permission="roles.view" style="display: none;">
                    <i>🔐</i> 角色管理
                </button>
                <button class="nav-item" onclick="showPage('logs')" data-permission="logs.view" style="display: none;">
                    <i>📝</i> 系统日志
                </button>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
        <header class="header">
            <h1 class="header-title" id="pageTitle">HOME</h1>
            <div class="user-info">
                <div class="user-avatar">A</div>
                <div>
                    <div id="adminInfo">管理员</div>
                    <small id="currentDate"></small>
                </div>
            </div>
        </header>
        
        <div class="content-area">
            <div class="page-content">

        <!-- 仪表板 -->
        <div id="dashboard" class="tab-content active">
            <h2>今日概览</h2>
            <div class="stats-grid" id="statsGrid">
                <div class="stat-card">
                    <h3 id="todayReserved">-</h3>
                    <p>今日预约</p>
                </div>
                <div class="stat-card">
                    <h3 id="todayCheckedIn">-</h3>
                    <p>已签到</p>
                </div>
            </div>

            <h3>今日时段统计</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>时段</th>
                        <th>时间</th>
                        <th>已预约</th>
                        <th>已签到</th>
                        <th>最大容量</th>
                        <th>剩余名额</th>
                    </tr>
                </thead>
                <tbody id="slotStatsTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 系统配置 -->
        <div id="config" class="tab-content">
            <h2>系统配置</h2>
            <div id="configAlert"></div>
            <div class="form-group">
                <label for="advanceBookingDays">可提前预约天数</label>
                <input type="number" id="advanceBookingDays" class="form-control" min="1" max="30" value="7">
            </div>
            <div class="form-group">
                <label for="maxCompanions">最大同行人数</label>
                <input type="number" id="maxCompanions" class="form-control" min="1" max="10" value="5">
            </div>
            <div class="form-group">
                <label for="VenueName">场馆名称</label>
                <input type="text" id="VenueName" class="form-control" value="南京中医药大学校史馆">
            </div>
            <div class="form-group">
                <label for="OpenTime">开放时间</label>
                <input type="text" id="OpenTime" class="form-control" value="周一至周五：09:00-16:30，16:00停止入馆，双休日及法定节假日闭馆">
            </div>
            <div class="form-group">
                <label for="Address">地址</label>
                <input type="text" id="Address" class="form-control" value="南京中医药大学仙林校区自信楼（江苏省中医药博物馆）3楼">
            </div>
            <div class="form-group">
                <label for="configPhone">电话</label>
                <input type="text" id="configPhone" class="form-control" value="025-85811666">
            </div>
            <div class="form-group">
                <label for="Email">邮箱</label>
                <input type="text" id="Email" class="form-control" value="nzy@nzy.edu.cn">
            </div>
            <div class="form-group">
                <label for="Subway">地铁</label>
                <input type="text" id="Subway" class="form-control" value="2号线羊山公园站1号出口步行10分钟">
            </div>
            <div class="form-group">
                <label for="Bus">公交</label>
                <input type="text" id="Bus" class="form-control" value="D1路、97路、321路中医药大学站">
            </div>
            <div class="form-group">
                <label for="reservationNotice">预约说明</label>
                <div class="editor—wrapper">
                    <div id="reservationNoticeToolbar" class="toolbar"></div>
					<div id="reservationNoticeEditor" class="editor"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="enterNotice">入馆须知</label>
                <div class="editor—wrapper">
                    <div id="enterNoticeToolbar" class="toolbar"></div>
					<div id="enterNoticeEditor" class="editor"></div>
                </div>
            </div>
            <!-- <div class="form-group">
                <label for="activityNotice">活动申请说明</label>
                <div id="activityNoticeEditor" style="height: 200px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <input type="hidden" id="activityNotice">
            </div> -->
            
            <button class="btn btn-primary" onclick="saveConfig()">保存配置</button>
        </div>


        <!-- 时段管理 -->
        <div id="timeslots" class="tab-content">
            <h2>时段管理</h2>
            <div id="timeslotsAlert"></div>
            
            <button class="btn btn-success" onclick="showAddTimeSlotModal()">添加时段</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>时段名称</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>最大人数</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="timeslotsTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 闭馆设置 -->
        <div id="closures" class="tab-content">
            <h2>特殊闭馆日期</h2>
            <div id="closuresAlert"></div>
            
            <button class="btn btn-success" onclick="showAddClosureModal()">添加闭馆日期</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>类型</th>
                        <th>原因</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="closuresTable">
                    <tr>
                        <td colspan="5" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 预约管理 -->
        <div id="reservations" class="tab-content">
            <h2>个人预约管理</h2>
            <div id="reservationsAlert"></div>
            
            <!-- 查询条件 -->
            <div class="search-filters" style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 1rem;">
                <div style="display: flex; flex-wrap: wrap; gap: 10px; align-items: end;">
                    <div>
                        <label style="font-size: 12px; color: #666;">姓名</label>
                        <input type="text" id="searchName" class="form-control" placeholder="搜索姓名" style="width: 120px;">
                    </div>
                    <div>
                        <label style="font-size: 12px; color: #666;">证件号码</label>
                        <input type="text" id="searchIdCard" class="form-control" placeholder="搜索证件号" style="width: 150px;">
                    </div>
                    <div>
                        <label style="font-size: 12px; color: #666;">联系方式</label>
                        <input type="text" id="searchPhone" class="form-control" placeholder="搜索手机号" style="width: 130px;">
                    </div>
                    <div>
                        <label style="font-size: 12px; color: #666;">预约状态</label>
                        <select id="searchStatus" class="form-control" style="width: 120px;">
                            <option value="">全部状态</option>
                            <option value="pending">待确认</option>
                            <option value="confirmed">已确认</option>
                            <option value="cancelled">已取消</option>
                            <option value="completed">已完成</option>
                        </select>
                    </div>
                    <div>
                        <label style="font-size: 12px; color: #666;">开始日期</label>
                        <input type="date" id="startDate" class="form-control" style="width: 140px;">
                    </div>
                    <div>
                        <label style="font-size: 12px; color: #666;">结束日期</label>
                        <input type="date" id="endDate" class="form-control" style="width: 140px;">
                    </div>
                    <div>
                        <button class="btn btn-primary" onclick="searchReservations()">查询</button>
                        <button class="btn btn-secondary" onclick="resetSearch()" style="margin-left: 5px;">重置</button>
                    </div>
                </div>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>日期</th>
                        <th>时段</th>
                        <th>状态</th>
                        <th>预约码</th>
                        <th>入馆时间</th>
                        <th>联系方式</th>
                    </tr>
                </thead>
                <tbody id="reservationsTable">
                    <tr>
                        <td colspan="8" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div id="reservationPagination" style="margin-top: 1rem; text-align: center;">
                <!-- 分页控件将由JavaScript生成 -->
            </div>
        </div>


        <!-- 用户管理 -->
        <div id="users" class="tab-content">
            <h2>微信用户管理</h2>
            <div id="usersAlert"></div>
            
            <div style="margin-bottom: 1rem;">
                <input type="text" id="userSearch" class="form-control" placeholder="搜索微信昵称、真实姓名" style="width: 300px; display: inline-block; margin-right: 1rem;">
                <button class="btn btn-primary" onclick="searchUsers()">搜索</button>
                <button class="btn btn-secondary" onclick="loadUsers()">刷新</button>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>微信昵称</th>
                        <th>真实姓名</th>
                        <th>注册时间</th>
                        <th>预约次数</th>
                        <th>核销员</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="usersTable">
                    <tr>
                        <td colspan="8" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 活动申请管理 -->
        <div id="activities" class="tab-content">
            <h2 class="page-title">活动申请管理</h2>
            <div id="activitiesAlert"></div>
            
            <!-- 统计卡片 -->
            <div class="stats-grid" style="margin-bottom: 1.5rem;">
                <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h3 id="activityTotalCount">-</h3>
                    <p>总申请数</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3 id="activityPendingCount">-</h3>
                    <p>待审核</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3 id="activityApprovedCount">-</h3>
                    <p>已通过</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h3 id="activityTodayCount">-</h3>
                    <p>今日新增</p>
                </div>
            </div>
            
            <!-- 筛选和搜索 -->
            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <input type="text" id="activitySearch" class="form-control" placeholder="搜索活动名称、联系人、主办方..." style="width: 300px;" onkeypress="if(event.key==='Enter') searchActivities()">
                <select id="activityStatusFilter" class="form-control" style="width: 150px;" onchange="filterActivitiesByStatus()">
                    <option value="">全部状态</option>
                    <option value="0">待审核</option>
                    <option value="1">已通过</option>
                    <option value="2">已拒绝</option>
                    <option value="3">已取消</option>
                </select>
                <select id="activityTypeFilter" class="form-control" style="width: 150px;" onchange="filterActivityByType()">
                    <option value="">全部类型</option>
                    <option value="学术讲座">学术讲座</option>
                    <option value="文化活动">文化活动</option>
                    <option value="展览参观">展览参观</option>
                    <option value="教学实践">教学实践</option>
                    <option value="其他">其他</option>
                </select>
                <input type="date" id="activityDateFilter" class="form-control" style="width: 150px;" onchange="filterActivityByDate()">
                <button class="btn btn-primary" onclick="searchActivities()">搜索</button>
                <button class="btn btn-secondary" onclick="loadActivities()">刷新</button>
            </div>
            
            <!-- 活动申请列表 -->
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 60px;">ID</th>
                        <th style="width: 150px;">活动名称</th>
                        <th style="width: 100px;">活动类型</th>
                        <th style="width: 120px;">活动日期</th>
                        <th style="width: 120px;">活动时间</th>
                        <th style="width: 80px;">人数</th>
                        <th style="width: 120px;">主办方</th>
                        <th style="width: 100px;">联系人</th>
                        <th style="width: 120px;">联系电话</th>
                        <th style="width: 100px;">状态</th>
                        <th style="width: 150px;">申请时间</th>
                        <th style="width: 200px;">操作</th>
                    </tr>
                </thead>
                <tbody id="activitiesTable">
                    <tr>
                        <td colspan="12" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div id="activityPagination" style="margin-top: 1rem; text-align: center;">
                <!-- 分页控件将由JavaScript生成 -->
            </div>
        </div>


        <!-- 团队预约管理 -->
        <div id="team-reservations" class="tab-content">
            <h2>团队预约管理</h2>
            <div id="teamReservationsAlert"></div>
            
            <div style="margin-bottom: 1rem;">
                <span style="color: #666; font-size: 14px; margin-right: 1rem;">💡 团队预约由小程序用户发起，后台负责审核管理</span>
                <input type="text" id="teamReservationSearch" class="form-control" placeholder="搜索团队名称、联系人、单位、电话" style="width: 350px; display: inline-block; margin-right: 1rem;">
                <button class="btn btn-primary" onclick="searchTeamReservations()">搜索</button>
                <button class="btn btn-secondary" onclick="loadTeamReservations()">刷新</button>
                <select id="teamStatusFilter" class="form-control" style="width: 150px; display: inline-block; margin-left: 1rem;" onchange="filterTeamReservationsByStatus()">
                    <option value="">全部状态</option>
                    <option value="pending">待审核</option>
                    <option value="approved">已批准</option>
                    <option value="rejected">已拒绝</option>
                    <option value="cancelled">已取消</option>
                    <option value="completed">已完成</option>
                </select>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>团队名称</th>
                        <th>联系人</th>
                        <th>联系单位</th>
                        <th>联系电话</th>
                        <th>参观者身份</th>
                        <th>预约日期</th>
                        <th>预约时间</th>
                        <th>人数</th>
                        <th>讲解</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="teamReservationsTable">
                    <tr>
                        <td colspan="12" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页控件 -->
            <div id="teamReservationPagination" style="margin-top: 1rem;">
                <!-- 分页控件将由JavaScript生成 -->
            </div>
        </div>

        <!-- 订阅消息模板管理 -->
        <div id="subscribe-templates" class="tab-content">
            <h2>微信订阅消息模板管理</h2>
            <div id="subscribeTemplatesAlert"></div>
            
            <div style="background: #e8f4fd; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid #3498db;">
                <h4 style="color: #2c3e50; margin-bottom: 0.5rem;">📱 配置说明</h4>
                <p style="margin: 0; color: #5a6c7d; line-height: 1.5;">
                    1. 请先到<a href="https://mp.weixin.qq.com" target="_blank" style="color: #3498db;">微信小程序后台</a>申请订阅消息模板<br>
                    2. 获得模板ID后，在此页面更新对应的模板配置<br>
                    3. 确保微信AppID和AppSecret已在系统配置中正确设置<br>
                    4. 模板数据格式请严格按照微信要求填写
                </p>
            </div>

            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <button class="btn btn-success" onclick="addSubscribeTemplate()">添加模板</button>
                <button class="btn btn-primary" onclick="testWeChatConfig()">测试微信配置</button>
                <button class="btn btn-secondary" onclick="loadSubscribeTemplates()">刷新</button>
                
                <div style="margin-left: auto; display: flex; align-items: center; gap: 0.5rem;">
                    <span style="font-size: 0.9rem; color: #666;">筛选：</span>
                    <select id="templateTypeFilter" class="form-control" style="width: 150px;" onchange="filterTemplatesByType()">
                        <option value="">全部类型</option>
                        <option value="reservation">预约相关</option>
                        <option value="team_reservation">团队预约</option>
                        <option value="volunteer">志愿者</option>
                        <option value="activity">活动相关</option>
                    </select>
                    <select id="templateStatusFilter" class="form-control" style="width: 120px;" onchange="filterTemplatesByStatus()">
                        <option value="">全部状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 120px;">模板标识</th>
                        <th style="width: 150px;">模板名称</th>
                        <th style="width: 100px;">类型</th>
                        <th style="width: 150px;">微信模板ID</th>
                        <th style="width: 200px;">描述</th>
                        <th style="width: 80px;">状态</th>
                        <th style="width: 120px;">最后更新</th>
                        <th style="width: 150px;">操作</th>
                    </tr>
                </thead>
                <tbody id="subscribeTemplatesTable">
                    <tr>
                        <td colspan="9" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>

            <!-- 消息发送日志 -->
            <div style="margin-top: 2rem;">
                <h3>消息发送日志</h3>
                <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                    <input type="date" id="logStartDate" class="form-control" style="width: auto;">
                    <span>至</span>
                    <input type="date" id="logEndDate" class="form-control" style="width: auto;">
                    <select id="logTemplateFilter" class="form-control" style="width: 200px;">
                        <option value="">全部模板</option>
                    </select>
                    <button class="btn btn-primary" onclick="loadMessageLogs()">查询</button>
                    <button class="btn btn-danger" onclick="clearOldLogs()" style="margin-left: auto;" 
                            onclick="return confirm('确定删除30天前的日志吗？')">清理日志</button>
                </div>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width: 60px;">ID</th>
                            <th style="width: 120px;">用户OpenID</th>
                            <th style="width: 150px;">模板ID</th>
                            <th style="width: 100px;">发送状态</th>
                            <th style="width: 150px;">发送时间</th>
                            <th style="width: 120px;">操作</th>
                        </tr>
                    </thead>
                    <tbody id="messageLogsTable">
                        <tr>
                            <td colspan="6" class="loading">请选择查询条件</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 轮播图管理 -->
        <div id="carousels" class="tab-content">
            <h2>轮播图管理</h2>
            <div id="carouselsAlert"></div>
            
            <div style="background: #e8f4fd; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid #3498db;">
                <h4 style="color: #2c3e50; margin-bottom: 0.5rem;">🎠 轮播图说明</h4>
                <p style="margin: 0; color: #5a6c7d; line-height: 1.5;">
                    轮播图用于小程序首页展示，支持跳转到不同页面或外部链接
                </p>
            </div>

            <!-- 统计信息 -->
            <div class="stats-grid" style="margin-bottom: 1.5rem;">
                <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h3 id="carouselTotalCount">-</h3>
                    <p>总数量</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3 id="carouselActiveCount">-</h3>
                    <p>启用中</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3 id="carouselTotalViews">-</h3>
                    <p>总浏览量</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h3 id="carouselTotalClicks">-</h3>
                    <p>总点击量</p>
                </div>
            </div>

            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <button class="btn btn-success" onclick="addCarousel()">添加轮播图</button>
                <input type="text" id="carouselSearch" class="form-control" placeholder="搜索轮播图标题..." style="width: 300px;">
                <select id="carouselStatusFilter" class="form-control" style="width: 150px;" onchange="filterCarouselsByStatus()">
                    <option value="">全部状态</option>
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                </select>
                <button class="btn btn-primary" onclick="searchCarousels()">搜索</button>
                <button class="btn btn-secondary" onclick="loadCarousels()">刷新</button>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 120px;">预览</th>
                        <th style="width: 200px;">标题</th>
                        <th style="width: 120px;">链接类型</th>
                        <th style="width: 100px;">排序</th>
                        <th style="width: 80px;">状态</th>
                        <th style="width: 100px;">浏览/点击</th>
                        <th style="width: 150px;">创建时间</th>
                        <th style="width: 200px;">操作</th>
                    </tr>
                </thead>
                <tbody id="carouselsTable">
                    <tr>
                        <td colspan="9" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 篇章管理 -->
        <div id="chapters" class="tab-content">
            <h2>篇章管理</h2>
            <div id="chaptersAlert"></div>
            
            <div style="background: #e8f4fd; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid #3498db;">
                <h4 style="color: #2c3e50; margin-bottom: 0.5rem;">📚 篇章说明</h4>
                <p style="margin: 0; color: #5a6c7d; line-height: 1.5;">
                    篇章是展览内容的一级分类，每个篇章下包含多个展项（二级内容）和展品（三级内容）
                </p>
            </div>

            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <button class="btn btn-success" onclick="addChapter()">添加篇章</button>
                <button class="btn btn-secondary" onclick="loadChapters()">刷新</button>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 200px;">篇章名称</th>
                        <th style="width: 150px;">英文名称</th>
                        <th style="width: 100px;">排序</th>
                        <th style="width: 150px;">创建时间</th>
                        <th style="width: 150px;">更新时间</th>
                        <th style="width: 200px;">操作</th>
                    </tr>
                </thead>
                <tbody id="chaptersTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 展项管理 -->
        <div id="exhibits" class="tab-content">
            <h2>展项管理</h2>
            <div id="exhibitsAlert"></div>
            
            <div style="background: #e8f4fd; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid #3498db;">
                <h4 style="color: #2c3e50; margin-bottom: 0.5rem;">🏛️ 展项说明</h4>
                <p style="margin: 0; color: #5a6c7d; line-height: 1.5;">
                    展项是展览的二级内容，隶属于特定篇章，每个展项下包含多个展品
                </p>
            </div>

            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <button class="btn btn-success" onclick="addExhibit()">添加展项</button>
                <select id="chapterFilter" class="form-control" style="width: 200px;" onchange="filterExhibitsByChapter()">
                    <option value="">全部篇章</option>
                </select>
                <button class="btn btn-secondary" onclick="loadExhibits()">刷新</button>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 150px;">所属篇章</th>
                        <th style="width: 200px;">展项名称</th>
                        <th style="width: 150px;">英文名称</th>
                        <th style="width: 100px;">排序</th>
                        <th style="width: 150px;">创建时间</th>
                        <th style="width: 200px;">操作</th>
                    </tr>
                </thead>
                <tbody id="exhibitsTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 展品管理 -->
        <div id="items" class="tab-content">
            <h2>展品管理</h2>
            <div id="itemsAlert"></div>
            
            <div style="background: #e8f4fd; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid #3498db;">
                <h4 style="color: #2c3e50; margin-bottom: 0.5rem;">💎 展品说明</h4>
                <p style="margin: 0; color: #5a6c7d; line-height: 1.5;">
                    展品是展览的三级内容，隶属于特定篇章和展项，包含具体的展示物品和介绍信息
                </p>
            </div>

            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <button class="btn btn-success" onclick="addItem()">添加展品</button>
                <select id="itemChapterFilter" class="form-control" style="width: 150px;" onchange="updateItemExhibitFilter()">
                    <option value="">选择篇章</option>
                </select>
                <select id="itemExhibitFilter" class="form-control" style="width: 150px;" onchange="filterItemsByExhibit()">
                    <option value="">选择展项</option>
                </select>
                <button class="btn btn-secondary" onclick="loadItems()">刷新</button>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 120px;">所属篇章</th>
                        <th style="width: 120px;">所属展项</th>
                        <th style="width: 200px;">展品名称</th>
                        <th style="width: 100px;">排序</th>
                        <th style="width: 150px;">创建时间</th>
                        <th style="width: 200px;">操作</th>
                    </tr>
                </thead>
                <tbody id="itemsTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>


        <!-- 管理员管理 -->
        <div id="admin" class="tab-content">
            <h2>管理员管理</h2>
            <div id="adminAlert"></div>
            
            <button class="btn btn-success" onclick="showAddAdminModal()" data-permission="admin.edit">添加管理员</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>最后登录</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="adminTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 角色管理 -->
        <div id="roles" class="tab-content">
            <h2>角色管理</h2>
            <div id="rolesAlert"></div>
            
            <button class="btn btn-success" onclick="showAddRoleModal()" data-permission="roles.edit">添加角色</button>
            
            <table class="table">
                <thead>
                    <tr>
                        <th>角色名称</th>
                        <th>显示名称</th>
                        <th>描述</th>
                        <th>用户数量</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="rolesTable">
                    <tr>
                        <td colspan="6" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 意见反馈管理 -->
        <div id="feedback" class="tab-content">
            <h2 class="page-title">意见反馈管理</h2>
            <div id="feedbackAlert"></div>
            
            <!-- 统计卡片 -->
            <div class="stats-grid" style="margin-bottom: 1.5rem;">
                <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h3 id="feedbackTotalCount">-</h3>
                    <p>总反馈数</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3 id="feedbackTodayCount">-</h3>
                    <p>今日新增</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3 id="feedbackThisMonthCount">-</h3>
                    <p>本月反馈</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h3 id="feedbackRecentCount">-</h3>
                    <p>近7天</p>
                </div>
            </div>
            
            <!-- 筛选和搜索 -->
            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <input type="text" id="feedbackSearch" class="form-control" placeholder="搜索标题或内容..." style="width: 300px;">
                <select id="feedbackTypeFilter" class="form-control" style="width: 150px;">
                    <option value="">全部类型</option>
                    <option value="suggestion">建议</option>
                    <option value="complaint">投诉</option>
                    <option value="question">咨询</option>
                    <option value="praise">表扬</option>
                    <option value="other">其他</option>
                </select>
                <input type="date" id="feedbackDateFilter" class="form-control" title="按提交日期筛选" style="width: 150px;">
                <button class="btn btn-primary" onclick="searchFeedback()">搜索</button>
                <button class="btn btn-secondary" onclick="loadFeedbacks()">刷新</button>
            </div>
            
            <!-- 反馈列表 -->
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 120px;">反馈类型</th>
                        <th style="width: 250px;">标题</th>
                        <th style="width: 150px;">提交用户</th>
                        <th style="width: 130px;">联系电话</th>
                        <th style="width: 300px;">反馈内容</th>
                        <th style="width: 160px;">提交时间</th>
                    </tr>
                </thead>
                <tbody id="feedbackTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div id="feedbackPagination" style="margin-top: 1rem; text-align: center;">
                <!-- 分页控件将由JavaScript生成 -->
            </div>
        </div>

        <!-- 志愿者申请管理 -->
        <div id="volunteers" class="tab-content">
            <h2 class="page-title">志愿者申请管理</h2>
            <div id="volunteersAlert"></div>
            
            <!-- 统计卡片 -->
            <div class="stats-grid" style="margin-bottom: 1.5rem;">
                <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h3 id="volunteerTotalCount">-</h3>
                    <p>总申请数</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3 id="volunteerTodayCount">-</h3>
                    <p>今日新增</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3 id="volunteerThisMonthCount">-</h3>
                    <p>本月申请</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h3 id="volunteerRecentCount">-</h3>
                    <p>近7天</p>
                </div>
            </div>
            
            <!-- 筛选和搜索 -->
            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <input type="text" id="volunteerSearch" class="form-control" placeholder="搜索姓名、学号、电话..." style="width: 300px;">
                <select id="volunteerGenderFilter" class="form-control" style="width: 120px;">
                    <option value="">全部性别</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
                <input type="text" id="volunteerDeptFilter" class="form-control" placeholder="院系筛选..." style="width: 200px;">
                <input type="date" id="volunteerDateFilter" class="form-control" title="按申请日期筛选" style="width: 150px;">
                <button class="btn btn-primary" onclick="searchVolunteers()">搜索</button>
                <button class="btn btn-secondary" onclick="loadVolunteers()">刷新</button>
            </div>
            
            
            <!-- 志愿者申请列表 -->
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 80px;">ID</th>
                        <th style="width: 120px;">姓名</th>
                        <th style="width: 80px;">性别</th>
                        <th style="width: 140px;">联系电话</th>
                        <th style="width: 120px;">学号</th>
                        <th style="width: 180px;">院系</th>
                        <th style="width: 100px;">年级</th>
                        <th style="width: 200px;">相关经验</th>
                        <th style="width: 160px;">申请时间</th>
                    </tr>
                </thead>
                <tbody id="volunteersTable">
                    <tr>
                        <td colspan="9" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div id="volunteerPagination" style="margin-top: 1rem; text-align: center;">
                <!-- 分页控件将由JavaScript生成 -->
            </div>
        </div>

        <!-- 常用观众信息管理 -->
        <div id="common-visitors" class="tab-content">
            <h2 class="page-title">常用观众信息管理</h2>
            <div id="visitorsAlert"></div>
            
            <!-- 统计卡片 -->
            <div class="stats-grid" style="margin-bottom: 1.5rem;">
                <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h3 id="visitorTotalCount">-</h3>
                    <p>总观众数</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3 id="visitorUniqueUsers">-</h3>
                    <p>独立用户</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3 id="visitorIdCardCount">-</h3>
                    <p>身份证</p>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h3 id="visitorTodayCount">-</h3>
                    <p>今日新增</p>
                </div>
            </div>
            
            <!-- 筛选和搜索 -->
            <div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <input type="text" id="visitorSearch" class="form-control" placeholder="搜索姓名、证件号、电话..." style="width: 300px;" onkeypress="if(event.key==='Enter') searchVisitors()">
                <select id="visitorIdTypeFilter" class="form-control" style="width: 150px;" onchange="searchVisitors()">
                    <option value="">全部证件</option>
                    <option value="身份证">身份证</option>
                    <option value="护照">护照</option>
                    <option value="军官证">军官证</option>
                    <option value="其他">其他</option>
                </select>
                <input type="number" id="visitorUserIdFilter" class="form-control" placeholder="用户ID筛选..." style="width: 150px;">
                <button class="btn btn-primary" onclick="searchVisitors()">搜索</button>
                <button class="btn btn-secondary" onclick="loadVisitorList()">刷新</button>
                <button class="btn btn-info" onclick="exportVisitors()">导出数据</button>
            </div>
            
            
            <!-- 观众信息列表 -->
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 60px;">ID</th>
                        <th style="width: 100px;">姓名</th>
                        <th style="width: 100px;">证件类型</th>
                        <th style="width: 150px;">证件号码</th>
                        <th style="width: 120px;">联系电话</th>
                        <th style="width: 120px;">关联用户</th>
                        <th style="width: 150px;">创建时间</th>
                    </tr>
                </thead>
                <tbody id="visitorsTable">
                    <tr>
                        <td colspan="7" class="loading">加载中...</td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页 -->
            <div id="visitorPagination" style="margin-top: 1rem; text-align: center;">
                <!-- 分页控件将由JavaScript生成 -->
            </div>
        </div>

        <!-- 系统日志 -->
        <div id="logs" class="tab-content">
            <h2>系统日志</h2>
            <div id="logsAlert"></div>
            
            <div style="margin-bottom: 1rem;">
                <select id="logType" class="form-control" style="width: auto; display: inline-block; margin-right: 1rem;">
                    <option value="login">登录日志</option>
                    <option value="operation">操作日志</option>
                </select>
                <button class="btn btn-primary" onclick="loadLogs()">查询</button>
            </div>
            
            <table class="table">
                <thead id="logsTableHead">
                    <tr>
                        <th>时间</th>
                        <th>用户</th>
                        <th>状态</th>
                        <th>IP地址</th>
                        <th>详情</th>
                    </tr>
                </thead>
                <tbody id="logsTable">
                    <tr>
                        <td colspan="5" class="loading">请选择日志类型查询</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        </div>
    </div>

    <!-- 模态框保持不变 -->
    <div id="addTimeSlotModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addTimeSlotModal')">&times;</span>
            <h3>添加时段</h3>
            <div class="form-group">
                <label for="slotName">时段名称</label>
                <input type="text" id="slotName" class="form-control" placeholder="如：上午场">
            </div>
            <div class="form-group">
                <label for="startTime">开始时间</label>
                <input type="time" id="startTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="endTime">结束时间</label>
                <input type="time" id="endTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="maxVisitors">最大人数</label>
                <input type="number" id="maxVisitors" class="form-control" min="1" value="50">
            </div>
            <button class="btn btn-success" onclick="addTimeSlot()">添加</button>
            <button class="btn" onclick="closeModal('addTimeSlotModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑时段模态框 -->
    <div id="editTimeSlotModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('editTimeSlotModal')">&times;</span>
            <h3>编辑时段</h3>
            <div class="form-group">
                <label for="editSlotName">时段名称</label>
                <input type="text" id="editSlotName" class="form-control" placeholder="如：上午场">
            </div>
            <div class="form-group">
                <label for="editStartTime">开始时间</label>
                <input type="time" id="editStartTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="editEndTime">结束时间</label>
                <input type="time" id="editEndTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="editMaxVisitors">最大人数</label>
                <input type="number" id="editMaxVisitors" class="form-control" min="1">
            </div>
            <div class="form-group">
                <label for="editIsActive">状态</label>
                <select id="editIsActive" class="form-control">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <button class="btn btn-primary" onclick="updateTimeSlot()">保存修改</button>
            <button class="btn" onclick="closeModal('editTimeSlotModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加闭馆日期模态框 -->
    <div id="addClosureModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addClosureModal')">&times;</span>
            <h3>添加闭馆设置</h3>
            
            <div class="form-group">
                <label for="closureType">闭馆类型</label>
                <select id="closureType" class="form-control" onchange="toggleClosureFields()">
                    <option value="once">指定日期闭馆</option>
                    <option value="weekly">每周闭馆</option>
                    <option value="monthly">每月闭馆</option>
                    <option value="yearly">每年闭馆</option>
                    <option value="range">日期范围闭馆</option>
                </select>
            </div>
            
            <!-- 指定日期字段 -->
            <div class="form-group" id="singleDateGroup">
                <label for="closureDate">闭馆日期</label>
                <input type="date" id="closureDate" class="form-control">
            </div>
            
            <!-- 日期范围字段 -->
            <div class="form-group" id="dateRangeGroup" style="display: none;">
                <label for="startDate">开始日期</label>
                <input type="date" id="startDate" class="form-control" style="margin-bottom: 0.5rem;">
                <label for="endDate">结束日期</label>
                <input type="date" id="endDate" class="form-control">
            </div>
            
            <!-- 每周闭馆字段 -->
            <div class="form-group" id="weeklyGroup" style="display: none;">
                <label>每周闭馆日（可多选）</label>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;">
                    <label><input type="checkbox" name="weekdays" value="1"> 周一</label>
                    <label><input type="checkbox" name="weekdays" value="2"> 周二</label>
                    <label><input type="checkbox" name="weekdays" value="3"> 周三</label>
                    <label><input type="checkbox" name="weekdays" value="4"> 周四</label>
                    <label><input type="checkbox" name="weekdays" value="5"> 周五</label>
                    <label><input type="checkbox" name="weekdays" value="6"> 周六</label>
                    <label><input type="checkbox" name="weekdays" value="0"> 周日</label>
                </div>
            </div>
            
            <!-- 每月闭馆字段 -->
            <div class="form-group" id="monthlyGroup" style="display: none;">
                <label for="monthlyDay">每月闭馆日期</label>
                <select id="monthlyDay" class="form-control">
                    <option value="">选择日期</option>
                </select>
                <small>注：如果某月没有对应日期，则自动跳过</small>
            </div>
            
            <!-- 每年闭馆字段 -->
            <div class="form-group" id="yearlyGroup" style="display: none;">
                <label for="yearlyMonth">每年闭馆月份</label>
                <select id="yearlyMonth" class="form-control" style="margin-bottom: 0.5rem;">
                    <option value="">选择月份</option>
                    <option value="1">1月</option>
                    <option value="2">2月</option>
                    <option value="3">3月</option>
                    <option value="4">4月</option>
                    <option value="5">5月</option>
                    <option value="6">6月</option>
                    <option value="7">7月</option>
                    <option value="8">8月</option>
                    <option value="9">9月</option>
                    <option value="10">10月</option>
                    <option value="11">11月</option>
                    <option value="12">12月</option>
                </select>
                <label for="yearlyDay">日期</label>
                <select id="yearlyDay" class="form-control">
                    <option value="">选择日期</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="closureReason">闭馆原因</label>
                <input type="text" id="closureReason" class="form-control" placeholder="如：节假日、维护日等">
            </div>
            
            <button class="btn btn-success" onclick="addClosure()">添加</button>
            <button class="btn" onclick="closeModal('addClosureModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑闭馆规则模态框 -->
    <div id="editClosureModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('editClosureModal')">&times;</span>
            <h3>编辑闭馆规则</h3>
            
            <div class="form-group">
                <label for="editClosureDate">闭馆日期</label>
                <input type="date" id="editClosureDate" class="form-control">
            </div>
            
            <div class="form-group">
                <label for="editClosureType">闭馆类型</label>
                <select id="editClosureType" class="form-control" disabled>
                    <option value="once">单次闭馆</option>
                    <option value="range">日期范围</option>
                    <option value="weekly">每周重复</option>
                    <option value="monthly">每月重复</option>
                    <option value="yearly">每年重复</option>
                </select>
                <small>注：闭馆类型不可修改</small>
            </div>
            
            <div class="form-group">
                <label for="editClosureReason">闭馆原因</label>
                <input type="text" id="editClosureReason" class="form-control" placeholder="如：节假日、维护日等">
            </div>
            
            <div class="form-group">
                <label for="editClosureStatus">状态</label>
                <select id="editClosureStatus" class="form-control">
                    <option value="1">生效</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            
            <button class="btn btn-primary" onclick="updateClosure()">保存修改</button>
            <button class="btn" onclick="closeModal('editClosureModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加管理员模态框 -->
    <div id="addAdminModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addAdminModal')">&times;</span>
            <h3>添加管理员</h3>
            <div class="form-group">
                <label for="adminUsername">用户名</label>
                <input type="text" id="adminUsername" class="form-control" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="adminPassword">密码</label>
                <input type="password" id="adminPassword" class="form-control" placeholder="密码">
            </div>
            <div class="form-group">
                <label for="adminRealName">真实姓名</label>
                <input type="text" id="adminRealName" class="form-control" placeholder="真实姓名">
            </div>
            <div class="form-group">
                <label for="adminEmail">邮箱</label>
                <input type="email" id="adminEmail" class="form-control" placeholder="邮箱">
            </div>
            <div class="form-group">
                <label for="adminRole">角色</label>
                <select id="adminRole" class="form-control">
                    <option value="">选择角色</option>
                </select>
            </div>
            <button class="btn btn-success" onclick="addAdmin()">添加</button>
            <button class="btn" onclick="closeModal('addAdminModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加角色模态框 -->
    <div id="addRoleModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addRoleModal')">&times;</span>
            <h3>添加角色</h3>
            <div class="form-group">
                <label for="roleName">角色名称</label>
                <input type="text" id="roleName" class="form-control" placeholder="角色英文名">
            </div>
            <div class="form-group">
                <label for="roleDisplayName">显示名称</label>
                <input type="text" id="roleDisplayName" class="form-control" placeholder="角色中文名">
            </div>
            <div class="form-group">
                <label for="roleDescription">描述</label>
                <textarea id="roleDescription" class="form-control" placeholder="角色描述"></textarea>
            </div>
            <div class="form-group">
                <label>权限设置</label>
                <div id="permissionsCheckbox" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 1rem;">
                    加载中...
                </div>
            </div>
            <button class="btn btn-success" onclick="addRole()">添加</button>
            <button class="btn" onclick="closeModal('addRoleModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑管理员模态框 -->
    <div id="editAdminModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('editAdminModal')">&times;</span>
            <h3>编辑管理员</h3>
            <div class="form-group">
                <label for="editAdminUsername">用户名</label>
                <input type="text" id="editAdminUsername" class="form-control" placeholder="用户名" disabled>
                <small>注：用户名不可修改</small>
            </div>
            <div class="form-group">
                <label for="editAdminRealName">真实姓名</label>
                <input type="text" id="editAdminRealName" class="form-control" placeholder="真实姓名">
            </div>
            <div class="form-group">
                <label for="editAdminEmail">邮箱</label>
                <input type="email" id="editAdminEmail" class="form-control" placeholder="邮箱">
            </div>
            <div class="form-group">
                <label for="editAdminRole">角色</label>
                <select id="editAdminRole" class="form-control">
                    <option value="">选择角色</option>
                </select>
            </div>
            <div class="form-group">
                <label for="editAdminStatus">状态</label>
                <select id="editAdminStatus" class="form-control">
                    <option value="active">正常</option>
                    <option value="inactive">禁用</option>
                </select>
            </div>
            <button class="btn btn-primary" onclick="updateAdmin()">保存修改</button>
            <button class="btn" onclick="closeModal('editAdminModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑角色模态框 -->
    <div id="editRoleModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('editRoleModal')">&times;</span>
            <h3>编辑角色</h3>
            <div class="form-group">
                <label for="editRoleName">角色名称</label>
                <input type="text" id="editRoleName" class="form-control" placeholder="角色英文名" disabled>
                <small>注：角色名称不可修改</small>
            </div>
            <div class="form-group">
                <label for="editRoleDisplayName">显示名称</label>
                <input type="text" id="editRoleDisplayName" class="form-control" placeholder="角色中文名">
            </div>
            <div class="form-group">
                <label for="editRoleDescription">描述</label>
                <textarea id="editRoleDescription" class="form-control" placeholder="角色描述"></textarea>
            </div>
            <div class="form-group">
                <label>权限设置</label>
                <div id="editPermissionsCheckbox" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 1rem;">
                    加载中...
                </div>
            </div>
            <div class="form-group">
                <label for="editRoleStatus">状态</label>
                <select id="editRoleStatus" class="form-control">
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                </select>
            </div>
            <button class="btn btn-primary" onclick="updateRole()">保存修改</button>
            <button class="btn" onclick="closeModal('editRoleModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加团队预约模态框 -->
    <div id="addTeamReservationModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('addTeamReservationModal')">&times;</span>
            <h3>添加团队预约</h3>
            <div class="form-group">
                <label for="teamName">团队名称</label>
                <input type="text" id="teamName" class="form-control" placeholder="请输入团队名称" required>
            </div>
            <div class="form-group">
                <label for="visitorIdentity">主要参观者身份</label>
                <select id="visitorIdentity" class="form-control" required>
                    <option value="">请选择参观者身份</option>
                    <option value="政府官员">政府官员</option>
                    <option value="企业高管">企业高管</option>
                    <option value="校友代表">校友代表</option>
                    <option value="教师团队">教师团队</option>
                    <option value="研究生导师">研究生导师</option>
                    <option value="学生团体">学生团体</option>
                    <option value="合作伙伴">合作伙伴</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label for="contactName">联系人姓名</label>
                <input type="text" id="contactName" class="form-control" placeholder="请输入联系人姓名" required>
            </div>
            <div class="form-group">
                <label for="contactUnit">联系人单位</label>
                <input type="text" id="contactUnit" class="form-control" placeholder="请输入联系人所在单位" required>
            </div>
            <div class="form-group">
                <label for="contactPhone">联系电话</label>
                <input type="tel" id="contactPhone" class="form-control" placeholder="请输入联系电话" required>
            </div>
            <div class="form-group">
                <label for="visitorCount">参观人数</label>
                <input type="number" id="visitorCount" class="form-control" min="1" max="100" value="10" required>
            </div>
            <div class="form-group">
                <label for="reservationDate">预约日期</label>
                <input type="date" id="reservationDate" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="reservationTime">预约时间</label>
                <input type="time" id="reservationTime" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="endTime">结束时间</label>
                <input type="time" id="endTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="needGuide">是否需要讲解</label>
                <select id="needGuide" class="form-control">
                    <option value="1">需要讲解</option>
                    <option value="0">不需要讲解</option>
                </select>
            </div>
            <div class="form-group">
                <label for="visitorInfo">主要参观者详细信息</label>
                <textarea id="visitorInfo" class="form-control" rows="4" placeholder="请详细描述参观团队的具体信息，如人员构成、参观目的等"></textarea>
            </div>
            <button class="btn btn-success" onclick="addTeamReservation()">添加</button>
            <button class="btn" onclick="closeModal('addTeamReservationModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑团队预约模态框 -->
    <div id="editTeamReservationModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('editTeamReservationModal')">&times;</span>
            <h3>编辑团队预约</h3>
            <div class="form-group">
                <label for="editTeamName">团队名称</label>
                <input type="text" id="editTeamName" class="form-control" placeholder="请输入团队名称" required>
            </div>
            <div class="form-group">
                <label for="editVisitorIdentity">主要参观者身份</label>
                <select id="editVisitorIdentity" class="form-control" required>
                    <option value="">请选择参观者身份</option>
                    <option value="政府官员">政府官员</option>
                    <option value="企业高管">企业高管</option>
                    <option value="校友代表">校友代表</option>
                    <option value="教师团队">教师团队</option>
                    <option value="研究生导师">研究生导师</option>
                    <option value="学生团体">学生团体</option>
                    <option value="合作伙伴">合作伙伴</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label for="editContactName">联系人姓名</label>
                <input type="text" id="editContactName" class="form-control" placeholder="请输入联系人姓名" required>
            </div>
            <div class="form-group">
                <label for="editContactUnit">联系人单位</label>
                <input type="text" id="editContactUnit" class="form-control" placeholder="请输入联系人所在单位" required>
            </div>
            <div class="form-group">
                <label for="editContactPhone">联系电话</label>
                <input type="tel" id="editContactPhone" class="form-control" placeholder="请输入联系电话" required>
            </div>
            <div class="form-group">
                <label for="editVisitorCount">参观人数</label>
                <input type="number" id="editVisitorCount" class="form-control" min="1" max="100" required>
            </div>
            <div class="form-group">
                <label for="editReservationDate">预约日期</label>
                <input type="date" id="editReservationDate" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="editReservationTime">预约时间</label>
                <input type="time" id="editReservationTime" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="editEndTime">结束时间</label>
                <input type="time" id="editEndTime" class="form-control">
            </div>
            <div class="form-group">
                <label for="editNeedGuide">是否需要讲解</label>
                <select id="editNeedGuide" class="form-control">
                    <option value="1">需要讲解</option>
                    <option value="0">不需要讲解</option>
                </select>
            </div>
            <div class="form-group">
                <label for="editVisitorInfo">主要参观者详细信息</label>
                <textarea id="editVisitorInfo" class="form-control" rows="4" placeholder="请详细描述参观团队的具体信息，如人员构成、参观目的等"></textarea>
            </div>
            <button class="btn btn-primary" onclick="updateTeamReservation()">保存修改</button>
            <button class="btn" onclick="closeModal('editTeamReservationModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加订阅消息模板模态框 -->
    <div id="addSubscribeTemplateModal" class="modal">
        <div class="modal-content" style="max-width: 700px;">
            <span class="close" onclick="closeModal('addSubscribeTemplateModal')">&times;</span>
            <h3>添加订阅消息模板</h3>
            
            <div class="form-group">
                <label for="templateKey">模板标识 *</label>
                <input type="text" id="templateKey" class="form-control" placeholder="如：RESERVATION_SUCCESS" required>
                <small>英文大写，下划线分隔，不可重复</small>
            </div>
            
            <div class="form-group">
                <label for="templateName">模板名称 *</label>
                <input type="text" id="templateName" class="form-control" placeholder="如：预约成功通知" required>
            </div>
            
            <div class="form-group">
                <label for="templateType">模板类型 *</label>
                <select id="templateType" class="form-control" required>
                    <option value="">请选择类型</option>
                    <option value="reservation">预约相关</option>
                    <option value="team_reservation">团队预约</option>
                    <option value="volunteer">志愿者</option>
                    <option value="activity">活动相关</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="wechatTemplateId">微信模板ID *</label>
                <input type="text" id="wechatTemplateId" class="form-control" placeholder="从微信小程序后台获取" required>
                <small>在微信小程序后台-功能-订阅消息中获取</small>
            </div>
            
            <div class="form-group">
                <label for="templateDescription">模板描述</label>
                <textarea id="templateDescription" class="form-control" rows="2" placeholder="简要描述此模板的用途"></textarea>
            </div>
            
            <div class="form-group">
                <label for="dataFormat">数据格式 (JSON) *</label>
                <textarea id="dataFormat" class="form-control" rows="4" placeholder='{"thing1":"项目名称","date2":"日期","time3":"时间","thing4":"备注"}' required></textarea>
                <small>请按照微信模板要求填写字段格式，JSON格式</small>
            </div>
            
            <div class="form-group">
                <label for="templateStatus">状态</label>
                <select id="templateStatus" class="form-control">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            
            <button class="btn btn-success" onclick="saveSubscribeTemplate()">保存</button>
            <button class="btn" onclick="closeModal('addSubscribeTemplateModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑订阅消息模板模态框 -->
    <div id="editSubscribeTemplateModal" class="modal">
        <div class="modal-content" style="max-width: 700px;">
            <span class="close" onclick="closeModal('editSubscribeTemplateModal')">&times;</span>
            <h3>编辑订阅消息模板</h3>
            
            <div class="form-group">
                <label for="editTemplateKey">模板标识</label>
                <input type="text" id="editTemplateKey" class="form-control" disabled>
                <small>模板标识不可修改</small>
            </div>
            
            <div class="form-group">
                <label for="editTemplateName">模板名称 *</label>
                <input type="text" id="editTemplateName" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editTemplateType">模板类型 *</label>
                <select id="editTemplateType" class="form-control" required>
                    <option value="reservation">预约相关</option>
                    <option value="team_reservation">团队预约</option>
                    <option value="volunteer">志愿者</option>
                    <option value="activity">活动相关</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="editWechatTemplateId">微信模板ID *</label>
                <input type="text" id="editWechatTemplateId" class="form-control" required>
                <small>在微信小程序后台-功能-订阅消息中获取</small>
            </div>
            
            <div class="form-group">
                <label for="editTemplateDescription">模板描述</label>
                <textarea id="editTemplateDescription" class="form-control" rows="2"></textarea>
            </div>
            
            <div class="form-group">
                <label for="editDataFormat">数据格式 (JSON) *</label>
                <textarea id="editDataFormat" class="form-control" rows="4" required></textarea>
                <small>请按照微信模板要求填写字段格式，JSON格式</small>
            </div>
            
            <div class="form-group">
                <label for="editTemplateStatus">状态</label>
                <select id="editTemplateStatus" class="form-control">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            
            <button class="btn btn-primary" onclick="updateSubscribeTemplate()">保存修改</button>
            <button class="btn" onclick="closeModal('editSubscribeTemplateModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 测试发送消息模态框 -->
    <div id="testMessageModal" class="modal">
        <div class="modal-content" style="max-width: 600px;">
            <span class="close" onclick="closeModal('testMessageModal')">&times;</span>
            <h3>测试发送订阅消息</h3>
            
            <div class="alert" style="background: #fff3cd; border: 1px solid #ffeaa7; color: #856404;">
                <strong>注意：</strong>测试发送需要用户已订阅该模板消息，否则发送会失败。
            </div>
            
            <div class="form-group">
                <label for="testTemplateId">选择模板</label>
                <select id="testTemplateId" class="form-control" onchange="loadTemplateDataFormat()" required>
                    <option value="">请选择模板</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="testOpenId">用户OpenID *</label>
                <input type="text" id="testOpenId" class="form-control" placeholder="用户的微信OpenID" required>
                <small>可从用户管理页面获取</small>
            </div>
            
            <div class="form-group">
                <label for="testMessageData">消息数据 (JSON) *</label>
                <textarea id="testMessageData" class="form-control" rows="6" placeholder="根据模板格式填写消息内容" required></textarea>
                <small>请按照模板数据格式填写</small>
            </div>
            
            <div class="form-group">
                <label for="testMiniProgramState">小程序状态</label>
                <select id="testMiniProgramState" class="form-control">
                    <option value="formal">正式版</option>
                    <option value="trial">体验版</option>
                    <option value="developer">开发版</option>
                </select>
            </div>
            
            <button class="btn btn-primary" onclick="sendTestMessage()">发送测试消息</button>
            <button class="btn" onclick="closeModal('testMessageModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 意见反馈详情模态框 -->
    <div id="feedbackDetailModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('feedbackDetailModal')">&times;</span>
            <h3>反馈详情</h3>
            
            <div class="form-group">
                <label>基本信息</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="feedbackDetailBasic"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label>反馈内容</label>
                <div id="feedbackDetailContent" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; min-height: 100px;"></div>
            </div>
            
            <div class="form-group" id="feedbackImagesContainer" style="display: none;">
                <label>相关图片</label>
                <div id="feedbackImages" style="display: flex; gap: 10px; flex-wrap: wrap;"></div>
            </div>
            
            <div class="form-group">
                <label for="feedbackReply">管理员回复</label>
                <textarea id="feedbackReply" class="form-control" rows="4" placeholder="请输入回复内容..."></textarea>
            </div>
            
            <div style="text-align: right;">
                <button class="btn btn-primary" onclick="replyToFeedback()">提交回复</button>
                <button class="btn" onclick="closeModal('feedbackDetailModal')" style="margin-left: 1rem;">关闭</button>
            </div>
        </div>
    </div>

    <!-- 志愿者申请详情模态框 -->
    <div id="volunteerDetailModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('volunteerDetailModal')">&times;</span>
            <h3>志愿者申请详情</h3>
            
            <div class="form-group">
                <label>基本信息</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="volunteerDetailBasic"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label>志愿经验</label>
                <div id="volunteerExperience" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; min-height: 80px;"></div>
            </div>
            
            <div class="form-group">
                <label>可用时间</label>
                <div id="volunteerAvailableTime" style="background: #f8f9fa; padding: 1rem; border-radius: 4px;"></div>
            </div>
            
            <div class="form-group">
                <label>自我介绍</label>
                <div id="volunteerSelfIntro" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; min-height: 100px;"></div>
            </div>
            
            <div class="form-group">
                <label for="volunteerReviewNote">审核意见</label>
                <textarea id="volunteerReviewNote" class="form-control" rows="3" placeholder="请输入审核意见..."></textarea>
            </div>
            
            <div style="text-align: right;">
                <button class="btn btn-success" onclick="approveVolunteer()">通过申请</button>
                <button class="btn btn-danger" onclick="rejectVolunteer()">拒绝申请</button>
                <button class="btn" onclick="closeModal('volunteerDetailModal')" style="margin-left: 1rem;">关闭</button>
            </div>
        </div>
    </div>

    <!-- 常用观众信息编辑模态框 -->
    <div id="editVisitorModal" class="modal">
        <div class="modal-content" style="max-width: 600px;">
            <span class="close" onclick="closeModal('editVisitorModal')">&times;</span>
            <h3>编辑观众信息</h3>
            
            <div class="form-group">
                <label for="editVisitorName">姓名 *</label>
                <input type="text" id="editVisitorName" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editVisitorIdType">证件类型 *</label>
                <select id="editVisitorIdType" class="form-control" required>
                    <option value="身份证">身份证</option>
                    <option value="护照">护照</option>
                    <option value="军官证">军官证</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="editVisitorIdNumber">证件号码 *</label>
                <input type="text" id="editVisitorIdNumber" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editVisitorPhone">联系电话</label>
                <input type="tel" id="editVisitorPhone" class="form-control" placeholder="手机号码">
            </div>
            
            <div style="text-align: right;">
                <button class="btn btn-primary" onclick="updateVisitorInfo()">保存修改</button>
                <button class="btn" onclick="closeModal('editVisitorModal')" style="margin-left: 1rem;">取消</button>
            </div>
        </div>
    </div>

    <!-- 观众信息详情查看模态框 -->
    <div id="visitorDetailModal" class="modal">
        <div class="modal-content" style="max-width: 700px;">
            <span class="close" onclick="closeModal('visitorDetailModal')">&times;</span>
            <h3>观众信息详情</h3>
            
            <div class="form-group">
                <label>基本信息</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="visitorDetailBasic"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label>关联用户信息</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="visitorUserInfo"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label>使用统计</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="visitorUsageStats"></div>
                </div>
            </div>
            
            <div style="text-align: right;">
                <button class="btn" onclick="closeModal('visitorDetailModal')">关闭</button>
            </div>
        </div>
    </div>

    <!-- 活动申请详情模态框 -->
    <div id="activityDetailModal" class="modal">
        <div class="modal-content" style="max-width: 900px;">
            <span class="close" onclick="closeModal('activityDetailModal')">&times;</span>
            <h3>活动申请详情</h3>
            
            <div class="form-group">
                <label>基本信息</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="activityDetailBasic"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label>活动描述</label>
                <div id="activityDescription" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; min-height: 100px;"></div>
            </div>
            
            <div class="form-group">
                <label>场地要求</label>
                <div id="activityVenueRequirements" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; min-height: 80px;"></div>
            </div>
            
            <div class="form-group">
                <label>设备需求</label>
                <div id="activityEquipmentNeeds" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; min-height: 80px;"></div>
            </div>
            
            <div class="form-group">
                <label for="activityReviewNote">审核意见</label>
                <textarea id="activityReviewNote" class="form-control" rows="3" placeholder="请输入审核意见..."></textarea>
            </div>
            
            <div style="text-align: right;">
                <button class="btn btn-success" onclick="approveActivity()">通过申请</button>
                <button class="btn btn-danger" onclick="rejectActivity()">拒绝申请</button>
                <button class="btn" onclick="closeModal('activityDetailModal')" style="margin-left: 1rem;">关闭</button>
            </div>
        </div>
    </div>


    <!-- 活动拒绝理由模态框 -->
    <div id="activityRejectModal" class="modal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close" onclick="closeModal('activityRejectModal')">&times;</span>
            <h3>拒绝活动申请</h3>
            
            <div class="form-group">
                <label>活动名称</label>
                <div id="rejectActivityName" style="font-weight: bold; color: #333; margin-bottom: 1rem;"></div>
            </div>
            
            <div class="form-group">
                <label for="rejectReason">拒绝理由 *</label>
                <textarea id="rejectReason" class="form-control" rows="4" placeholder="请输入拒绝理由..." required></textarea>
            </div>
            
            <div style="text-align: right; margin-top: 1rem;">
                <button class="btn btn-danger" onclick="confirmRejectActivity()">确认拒绝</button>
                <button class="btn" onclick="closeModal('activityRejectModal')" style="margin-left: 1rem;">取消</button>
            </div>
        </div>
    </div>

    <!-- 批量审核志愿者模态框 -->
    <div id="batchReviewVolunteersModal" class="modal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close" onclick="closeModal('batchReviewVolunteersModal')">&times;</span>
            <h3>批量审核志愿者申请</h3>
            
            <div class="form-group">
                <label>审核状态</label>
                <div id="batchReviewStatus" style="font-weight: bold; color: #333;"></div>
            </div>
            
            <div class="form-group">
                <label>选中申请</label>
                <div id="batchReviewList" style="background: #f8f9fa; padding: 1rem; border-radius: 4px; max-height: 200px; overflow-y: auto;"></div>
            </div>
            
            <div class="form-group">
                <label for="batchReviewNote">审核意见</label>
                <textarea id="batchReviewNote" class="form-control" rows="3" placeholder="请输入审核意见..."></textarea>
            </div>
            
            <div style="text-align: right;">
                <button class="btn btn-primary" onclick="confirmBatchReview()">确认审核</button>
                <button class="btn" onclick="closeModal('batchReviewVolunteersModal')" style="margin-left: 1rem;">取消</button>
            </div>
        </div>
    </div>

    <!-- 消息日志详情模态框 -->
    <div id="messageLogDetailModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('messageLogDetailModal')">&times;</span>
            <h3>消息发送详情</h3>
            
            <div class="form-group">
                <label>基本信息</label>
                <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px;">
                    <div id="logDetailBasic"></div>
                </div>
            </div>
            
            <div class="form-group">
                <label>消息数据</label>
                <textarea id="logDetailData" class="form-control" rows="6" readonly></textarea>
            </div>
            
            <div class="form-group">
                <label>发送结果</label>
                <textarea id="logDetailResult" class="form-control" rows="4" readonly></textarea>
            </div>
            
            <button class="btn" onclick="closeModal('messageLogDetailModal')">关闭</button>
        </div>
    </div>

    <!-- 添加轮播图模态框 -->
    <div id="addCarouselModal" class="modal">
        <div class="modal-content" style="max-width: 600px;">
            <span class="close" onclick="closeModal('addCarouselModal')">&times;</span>
            <h3>添加轮播图</h3>
            
            <div class="form-group">
                <label for="carouselTitle">标题 *</label>
                <input type="text" id="carouselTitle" class="form-control" placeholder="请输入轮播图标题" required>
            </div>
            
            <div class="form-group">
                <label for="carouselImageUrl">图片URL *</label>
                <input type="url" id="carouselImageUrl" class="form-control" placeholder="请输入图片地址" required>
                <small>建议尺寸：750x300像素</small>
            </div>
            
            <div class="form-group">
                <label for="carouselLinkType">链接类型</label>
                <select id="carouselLinkType" class="form-control">
                    <option value="none">无链接</option>
                    <option value="url">外部链接</option>
                    <option value="page">小程序页面</option>
                    <option value="miniprogram">小程序跳转</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="carouselLinkValue">链接地址</label>
                <input type="text" id="carouselLinkValue" class="form-control" placeholder="根据链接类型填入相应地址">
                <small>
                    无链接：留空<br>
                    外部链接：http://example.com<br>
                    小程序页面：/pages/detail/index<br>
                    小程序跳转：appid,path
                </small>
            </div>
            
            <div class="form-group">
                <label for="carouselSort">排序权重</label>
                <input type="number" id="carouselSort" class="form-control" value="0" min="0" max="999">
                <small>数字越小越靠前显示</small>
            </div>
            
            <div class="form-group">
                <label for="carouselStatus">状态</label>
                <select id="carouselStatus" class="form-control">
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                </select>
            </div>
            
            <button class="btn btn-success" onclick="saveCarousel()">保存</button>
            <button class="btn" onclick="closeModal('addCarouselModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑轮播图模态框 -->
    <div id="editCarouselModal" class="modal">
        <div class="modal-content" style="max-width: 600px;">
            <span class="close" onclick="closeModal('editCarouselModal')">&times;</span>
            <h3>编辑轮播图</h3>
            
            <div class="form-group">
                <label for="editCarouselTitle">标题 *</label>
                <input type="text" id="editCarouselTitle" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editCarouselImageUrl">图片URL *</label>
                <input type="url" id="editCarouselImageUrl" class="form-control" required>
                <small>建议尺寸：750x300像素</small>
            </div>
            
            <div class="form-group">
                <label for="editCarouselLinkType">链接类型</label>
                <select id="editCarouselLinkType" class="form-control">
                    <option value="none">无链接</option>
                    <option value="url">外部链接</option>
                    <option value="page">小程序页面</option>
                    <option value="miniprogram">小程序跳转</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="editCarouselLinkValue">链接地址</label>
                <input type="text" id="editCarouselLinkValue" class="form-control">
                <small>
                    无链接：留空<br>
                    外部链接：http://example.com<br>
                    小程序页面：/pages/detail/index<br>
                    小程序跳转：appid,path
                </small>
            </div>
            
            <div class="form-group">
                <label for="editCarouselSort">排序权重</label>
                <input type="number" id="editCarouselSort" class="form-control" min="0" max="999">
                <small>数字越小越靠前显示</small>
            </div>
            
            <div class="form-group">
                <label for="editCarouselStatus">状态</label>
                <select id="editCarouselStatus" class="form-control">
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                </select>
            </div>
            
            <button class="btn btn-primary" onclick="updateCarousel()">保存修改</button>
            <button class="btn" onclick="closeModal('editCarouselModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 内容管理模态框 -->
    
    <!-- 添加篇章模态框 -->
    <!-- <div id="addChapterModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('addChapterModal')">&times;</span>
            <h3>添加篇章</h3>
            <div class="form-group">
                <label for="chapterName">篇章名称 *</label>
                <input type="text" id="addChapterName" class="form-control" placeholder="请输入篇章名称" required>
            </div>
            <div class="form-group">
                <label for="chapterSort">排序 *</label>
                <input type="number" id="addChapterSort" class="form-control" min="1" value="1" required>
                <small>数字越小越在前</small>
            </div>
            <div class="form-group">
                <label for="addChapterImage">图片</label>
                <input type="file" name="addChapterImg[]" multiple accept="image/*">
                <div id="addChapterImageList"></div>
            </div>
            <div class="form-group">
                <label for="ChapterContent">详细内容</label>
                <div class="editor—wrapper">
					<div id="addChapterToolbar" class="toolbar"></div>
					<div id="addChapterEditor" class="editor"></div>
				</div>
            </div>
            <button class="btn btn-success" onclick="saveChapter()">保存</button>
            <button class="btn" onclick="closeModal('addChapterModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div> -->
    <!-- 添加篇章模态框 -->
    <div id="addChapterModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <form id="addChapterForm" enctype="multipart/form-data">
                <span class="close" onclick="closeModal('addChapterModal')">&times;</span>
                <h3>添加篇章</h3>
                <div class="form-group">
                    <label for="addChapterName">篇章名称 *</label>
                    <input type="text" id="addChapterName" class="form-control" placeholder="请输入篇章名称" autocomplete="off" required>
                </div>
                <div class="form-group">
                    <label for="addChapterSort">排序 *</label>
                    <input type="number" id="addChapterSort" class="form-control" min="1" value="1" required>
                    <small>数字越小越在前</small>
                </div>
                <div class="form-group">
                    <label for="addChapterImage">图片上传</label>
                    <input type="file" id="addChapterImageInput" multiple accept="image/*" style="display: none;">
                    <button type="button" class="btn btn-primary" onclick="document.getElementById('addChapterImageInput').click()">
                        <i>📁</i> 选择图片
                    </button>
                    <div id="addChapterImagePreview" class="image-preview-container" style="margin-top: 15px;"></div>
                </div>
                <div class="form-group">
                    <label for="addChapterContent">详细内容</label>
                    <div class="editor—wrapper">
                        <div id="addChapterToolbar" class="toolbar"></div>
                        <div id="addChapterEditor" class="editor"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-success" onclick="saveChapter()">保存</button>
                <button type="button" class="btn" onclick="closeModal('addChapterModal')" style="margin-left: 1rem;">取消</button>
            </form>
        </div>
    </div>

    <!-- 查看篇章模态框 -->
    <div id="viewChapterModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('viewChapterModal')">&times;</span>
            <h3>篇章详情</h3>
            <div class="form-group">
                <label for="viewChapterName">篇章名称</label>
                <input type="text" id="viewChapterName" class="form-control" disabled>
            </div>
            <div class="form-group">
                <label for="viewChapterSort">排序 *</label>
                <input type="number" id="viewChapterSort" class="form-control" disabled>
                <small>数字越小越在前</small>
            </div>
            <div class="form-group">
                <label for="viewChapterImage">图片</label>
                <div id="viewChapterImage"></div>
            </div>
            <div class="form-group">
                <label for="viewChapterContent">详细内容</label>
                <div class="editor—wrapper">
					<div id="viewChapterToolbar" class="toolbar"></div>
					<div id="viewChapterEditor" class="editor"></div>
				</div>
            </div>
            <button class="btn" onclick="closeModal('viewChapterModal')" style="margin-left: 1rem;">关闭</button>
        </div>
    </div>

    <!-- 编辑篇章模态框 -->
    <div id="editChapterModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('editChapterModal')">&times;</span>
            <h3>编辑篇章</h3>
            
            <div class="form-group">
                <label for="editChapterName">篇章名称 *</label>
                <input type="text" id="editChapterName" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editChapterEnglishName">英文名称</label>
                <input type="text" id="editChapterEnglishName" class="form-control">
            </div>
            
            <div class="form-group">
                <label for="editChapterBrief">简介</label>
                <div id="editChapterBriefEditor" style="height: 200px;"></div>
                <input type="hidden" id="editChapterBrief">
            </div>
            
            <div class="form-group">
                <label for="editChapterContent">详细内容</label>
                <div id="editChapterContentEditor" style="height: 300px;"></div>
                <input type="hidden" id="editChapterContent">
            </div>
            
            <div class="form-group">
                <label for="editChapterSort">排序 *</label>
                <input type="number" id="editChapterSort" class="form-control" min="1" required>
                <small>数字越小越在前</small>
            </div>
            
            <button class="btn btn-primary" onclick="updateChapter()">保存修改</button>
            <button class="btn" onclick="closeModal('editChapterModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加展项模态框 -->
    <div id="addExhibitModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('addExhibitModal')">&times;</span>
            <h3>添加展项</h3>
            
            <div class="form-group">
                <label for="exhibitChapter">所属篇章 *</label>
                <select id="exhibitChapter" class="form-control" required>
                    <option value="">请选择篇章</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="exhibitName">展项名称 *</label>
                <input type="text" id="exhibitName" class="form-control" placeholder="请输入展项名称" required>
            </div>
            
            <div class="form-group">
                <label for="exhibitEnglishName">英文名称</label>
                <input type="text" id="exhibitEnglishName" class="form-control" placeholder="请输入英文名称">
            </div>
            
            <div class="form-group">
                <label for="exhibitBrief">简介</label>
                <div id="exhibitBriefEditor" style="height: 200px;"></div>
                <input type="hidden" id="exhibitBrief">
            </div>
            
            <div class="form-group">
                <label for="exhibitContent">详细内容</label>
                <div id="exhibitContentEditor" style="height: 300px;"></div>
                <input type="hidden" id="exhibitContent">
            </div>
            
            <div class="form-group">
                <label for="exhibitSort">排序 *</label>
                <input type="number" id="exhibitSort" class="form-control" min="1" value="1" required>
                <small>数字越小越在前</small>
            </div>
            
            <button class="btn btn-success" onclick="saveExhibit()">保存</button>
            <button class="btn" onclick="closeModal('addExhibitModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑展项模态框 -->
    <div id="editExhibitModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('editExhibitModal')">&times;</span>
            <h3>编辑展项</h3>
            
            <div class="form-group">
                <label for="editExhibitChapter">所属篇章 *</label>
                <select id="editExhibitChapter" class="form-control" required>
                    <option value="">请选择篇章</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="editExhibitName">展项名称 *</label>
                <input type="text" id="editExhibitName" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editExhibitEnglishName">英文名称</label>
                <input type="text" id="editExhibitEnglishName" class="form-control">
            </div>
            
            <div class="form-group">
                <label for="editExhibitBrief">简介</label>
                <div id="editExhibitBriefEditor" style="height: 200px;"></div>
                <input type="hidden" id="editExhibitBrief">
            </div>
            
            <div class="form-group">
                <label for="editExhibitContent">详细内容</label>
                <div id="editExhibitContentEditor" style="height: 300px;"></div>
                <input type="hidden" id="editExhibitContent">
            </div>
            
            <div class="form-group">
                <label for="editExhibitSort">排序 *</label>
                <input type="number" id="editExhibitSort" class="form-control" min="1" required>
                <small>数字越小越在前</small>
            </div>
            
            <button class="btn btn-primary" onclick="updateExhibit()">保存修改</button>
            <button class="btn" onclick="closeModal('editExhibitModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 添加展品模态框 -->
    <div id="addItemModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('addItemModal')">&times;</span>
            <h3>添加展品</h3>
            
            <div class="form-group">
                <label for="itemChapter">所属篇章 *</label>
                <select id="itemChapter" class="form-control" onchange="updateItemExhibits()" required>
                    <option value="">请选择篇章</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="itemExhibit">所属展项 *</label>
                <select id="itemExhibit" class="form-control" required>
                    <option value="">请先选择篇章</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="itemName">展品名称 *</label>
                <input type="text" id="itemName" class="form-control" placeholder="请输入展品名称" required>
            </div>
            
            <div class="form-group">
                <label for="itemContent">详细内容</label>
                <div id="itemContentEditor" style="height: 300px;"></div>
                <input type="hidden" id="itemContent">
            </div>
            
            <div class="form-group">
                <label for="itemSort">排序 *</label>
                <input type="number" id="itemSort" class="form-control" min="1" value="1" required>
                <small>数字越小越在前</small>
            </div>
            
            <button class="btn btn-success" onclick="saveItem()">保存</button>
            <button class="btn" onclick="closeModal('addItemModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>

    <!-- 编辑展品模态框 -->
    <div id="editItemModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close" onclick="closeModal('editItemModal')">&times;</span>
            <h3>编辑展品</h3>
            
            <div class="form-group">
                <label for="editItemChapter">所属篇章 *</label>
                <select id="editItemChapter" class="form-control" onchange="updateEditItemExhibits()" required>
                    <option value="">请选择篇章</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="editItemExhibit">所属展项 *</label>
                <select id="editItemExhibit" class="form-control" required>
                    <option value="">请先选择篇章</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="editItemName">展品名称 *</label>
                <input type="text" id="editItemName" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label for="editItemContent">详细内容</label>
                <div id="editItemContentEditor" style="height: 300px;"></div>
                <input type="hidden" id="editItemContent">
            </div>
            
            <div class="form-group">
                <label for="editItemSort">排序 *</label>
                <input type="number" id="editItemSort" class="form-control" min="1" required>
                <small>数字越小越在前</small>
            </div>
            
            <button class="btn btn-primary" onclick="updateItem()">保存修改</button>
            <button class="btn" onclick="closeModal('editItemModal')" style="margin-left: 1rem;">取消</button>
        </div>
    </div>


    <script src="admin.js"></script>
</body>
</html>